<template>
  <div class="index-body">
    <!--头部 start-->
    <canter-header></canter-header>
    <!--头部 end-->
    <div class="index-con">
      <div class="index-box">
            <h2 class="classify-title"><span class="gray" @click="goBack_btn">应用中心</span><em>&gt;</em>智齿客服</h2>
            <div class="index-page-top">
              <img src="../../assets/img/zc1.png"/>
              <div class="index-details">
                <span class="index-details-title">智齿客服</span>
                <span class="index-details-into">管理支持</span>
                <span class="index-details-price"><em>免费</em></span>
                <!--<span class="index-details-price"><em @click="goBack_btn">关闭</em></span>-->
              </div>
              <span class="zcSet" @click="goZc_btn" v-if="empowerShow">进入</span>
              <span class="zcSet" @click="setZc_btn" v-else>设置</span>
            </div>
           <div class="img-box">
             <img src="../../assets/img/zc10.jpg"/>
             <img src="../../assets/img/zc2.jpg"/>
             <img src="../../assets/img/zc8.jpg"/>
             <img src="../../assets/img/zc9.jpg"/>
             <img src="../../assets/img/zc7.jpg"/>
             <img src="../../assets/img/zc6.jpg"/>
             <img src="../../assets/img/zc5.jpg"/>
             <img src="../../assets/img/zc4.jpg"/>
             <img src="../../assets/img/zc3.jpg"/>
             <img src="../../assets/img/zc2.jpg"/>
           </div>
      </div>
    </div>
    <div class="index-footer">
      <p>云商-移动供应链电商平台</p>
    </div>
  </div>
</template>
<script>
  import canterHeader from '../../components/header/canterHeader'
  export default{
    components:{
      canterHeader,
    },
    data(){
      return{
        empowerShow:false,    //值为true时：显示进入；值为false时，显示设置
      }
    },
    methods:{
      //点击智齿跳转页面（关闭按钮）
      goBack_btn(){
        this.$router.push({path:"/centerIndex"});
      },

      //（进入）按钮
      goZc_btn(){
        localStorage.setItem("empowerShow",this.empowerShow);
        this.$router.push({path:"/readyPower"});
      },

      //（设置）按钮
      setZc_btn(){
        this.$router.push({path:"/zcEmpower"});
      },

      //查询是否开通客服
      queryCustomAccountData(){
        this.axios({
          method:"GET",
          url:"/v3/custom/accounts/00000000",
          data:{},
        }).then((res) =>{
          this.empowerShow = true;
        }).catch((err) =>{
          this.empowerShow = false
        });
      },
    },
    created(){
      this.queryCustomAccountData();
    },
  }
</script>
<style scoped>

  .img-box img{
    width: 100%;
  }

  .img-box{
    overflow: hidden;
    margin-top: 40px;
  }

  .zcSet{
    float: right;
    display: block;
    background: rgb(19, 193, 159);
    color: white;
    padding: 12px 38px;
  }

  .zcSet:hover{
    cursor: pointer;
    opacity: 0.8;
  }

  .index-footer{
    height: 80px;
    line-height: 80px;
  }

  .index-footer p{
    text-align: center;
  }

  .index-details-price em{
    display: inline-block;
    padding: 4px 8px;
    line-height: 14px;
    font-size: 14px;
    text-align: center;
    color: #FFFFFF;
    background-color: rgb(19, 193, 159);
    border-radius: 2px;
    font-style: normal;
    cursor: pointer;
  }

  .index-details-price em:hover{
    opacity: 0.8;
  }

  .index-details-price{
    margin-top: 6px;
    font-size: 16px;
    color: #ff7636;
  }

  .index-details-into{
    display: block;
    margin-top: 8px;
    height: 15px;
    line-height: 15px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #aaaaaa;
  }

  .index-details-title{
    font-size: 16px;
    line-height: 20px;
    color: #555555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .index-details span{
    display: block;
  }

  .index-details{
    float: left;
  }

  .index-page-top img{
    width: 72px;
    height: 72px;
    float: left;
    margin-right: 15px;
  }

 .index-page-top{
   width: 100%;
   overflow: hidden;
   margin-top: 50px;
 }

  .classify-title{
    height: 60px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: normal;
    line-height: 60px;
    border-bottom: 1px solid #ddd;
    color: #555555;
  }

  .classify-title em{
    font-size: 12px;
    margin: 0 4px;
    color: #999999;
  }

  .gray{
    color: #999999;
    cursor: pointer;
  }

  .gray:hover{
    color: #888888;
  }

  .index-box{
    width: 1000px;
    padding: 0 10px;
    margin: 0 auto;
    overflow: hidden;
  }

  .index-con{
    overflow: hidden;
    width: 100%;
  }

  .index-body{
    padding-top: 80px;
    background: #f5f5f5;
    overflow: hidden;
  }
</style>
